/** * @description: 行为失范预警-心理预警-学业预警-各学院分布 */
<template>
  <div>
    <div
      :class="[index > 0 ? 'van-hairline--top' : '', 'content']"
      v-for="(item, index) of collegeWarningList"
      :key="index"
      @click="collegeWarningClick(item)"
    >
      <div class="content-top">
        <p>
          <i></i>
          <span>
            {{ item.collegeName || '--' }}
          </span>
        </p>
        <p>
          <span>{{ item.allNums || 0 }}</span>
          <label>人</label>
        </p>
      </div>
      <!-- 行为失范预警 -->
      <div class="content-bottom" v-if="type === 'behavior'">
        <p>
          <span>{{ item.warningNums || 0 }}</span>
          <label>行为失范预警学生</label>
        </p>
        <p class="van-hairline--left">
          <span>{{ item.reportNums || 0 }}</span>
          <label>寝室事件上报</label>
        </p>
      </div>
      <!-- 心理预警 -->
      <div class="content-bottom" v-if="type === 'psy'">
        <p>
          <span>{{ item.warnStuNums || 0 }}</span>
          <label>心理预警人数</label>
        </p>
        <p class="van-hairline--left">
          <span>{{ item.warnTimes || 0 }}</span>
          <label>心理预警记录</label>
        </p>
      </div>
      <!-- 学业预警 -->
      <div class="content-bottom" v-if="type === 'study'">
        <p>
          <span>{{ item.requiredTimes || 0 }}</span>
          <label>应考勤人次</label>
        </p>
        <p class="van-hairline--left">
          <span>{{ item.absentTimes || 0 }}</span>
          <label>旷课人次</label>
        </p>
        <p class="van-hairline--left">
          <span>{{ item.absentNums || 0 }}</span>
          <label>旷课人数</label>
        </p>
        <p class="van-hairline--left">
          <span>{{ item.proportion || 0 }}<i>%</i></span>
          <label>旷课率</label>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CollegeWarning',
  props: ['collegeWarningList', 'type'],
  methods: {
    collegeWarningClick(item) {
      this.$router.push({ path: '/warningList', query: { collegeId: item.collegeId, tc: item.collegeName, type: this.type } })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  padding-bottom: 20px;
  .content-top {
    @include fcb();
    p {
      i {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url('../../../assets/images/college-icon.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 12px;
      }
      span {
        font-size: $fz16;
        color: $color-title;
      }
      label {
        font-size: $fz12;
        color: $color-title;
        margin-right: 10px;
      }
    }
    p:first-child {
      @include fh();
    }
  }

  .content-bottom {
    @include fca();
    padding-top: 25px;
    p {
      flex: 1;
      text-align: center;
      span,
      label {
        display: block;
      }
      span {
        font-size: $fz20;
        text-align: center;
        i {
          font-size: $fz12;
        }
      }
      label {
        font-size: $fz12;
        color: #97979f;
        margin-top: 8px;
      }
    }
    p + p {
      // border-left: 1px solid #e7eaf0;
    }
  }
}
.content + .content {
  padding-top: 15px;
}
</style>
